var RioFeatures = Base.extend({
    currentFeature: null,
    newFeature: null,
    featureDescriptionPanel: null,
    animation: null,
    timeOutId: null,
    sections: null,

    TIMEOUT_PERIOD: 500,

    constructor: function()
    {
        this.sections = $(".rio_feature_section");

        this.featureDescriptionPanel = $("#featureDescriptionPanel");
        this.currentFeature = null;

        if(this.isAnimationEnabled())
        {
            this.animation = new FeaturesAnimation(this.featureDescriptionPanel);
            this.animation.addListener('panelClosed', this, this.collapseOpenSubsection);
            this.animation.addListener('contentFaded', this, this.onContentFade);
        }

        var links = $(".feature_link");
        $(links).bind("click", handler(this, "onFeatureLinkClickHandler"));

        this.collapseOpenSubsection();

        this.showFeatureFromUrl();
    },

    showFeatureFromUrl: function()
    {
        var url = window.location.href;
        var pos = url.indexOf('#');
        var anchor = "#fast_compilation";

        if ( pos != -1 )
        {
            anchor = url.substr(url.indexOf('#'), url.length);
            this.scrollUp();
        }

        this.newFeature = $("a[href=" + anchor + "]");
        if(this.newFeature.html())
        {
            this.onFeatureLinkClickHandlerImpl();
        }
    },

    onContentFade: function()
    {
        this.collapseOpenSubsection();
        this.showPanelContent();
    },

    // hide all subsections in panel
    collapseOpenSubsection: function()
    {
        if(this.isAnimationEnabled())
        {
            this.featureDescriptionPanel.children().css({opacity: 0});
        }

        this.sections.children().hide();
        this.sections.children().children().hide();
    },

    // on any link click: block other clicks for TIME_OUT_PERIOD
    onFeatureLinkClickHandler: function(event)
    {
        this.newFeature = $(event.target);

        var isNotNull = (this.newFeature != null) && (this.currentFeature != null);

        if(isNotNull)
        {
            if( this.newFeature.html() != this.currentFeature.html())
            {
                this.scrollUp();
            }
        }
        else
        {
            this.scrollUp();
        }
        clearTimeout( this.timeOutId );
        this.timeOutId = setTimeout( handler(this, "onFeatureLinkClickHandlerImpl"), this.TIMEOUT_PERIOD );
    },

    // link click implemetation
    onFeatureLinkClickHandlerImpl: function()
    {
        this.switchLinkStyle(this.newFeature);
        this.switchLinkStyle(this.currentFeature);

        var isFirstClick = (this.currentFeature == null);
        var isOpenedFeatureClick = (this.currentFeature
                && (this.currentFeature.attr('href') == this.newFeature.attr('href')));

        if(isFirstClick) // first click on link
        {
            this.showPanel();
        }
        else if(isOpenedFeatureClick) // on same link: close
        {
            this.closePanel();
        }
        else // on another link
        {
            this.updatePanelContent();
        }
    },

    // show panel and its content
    showPanel: function()
    {
        this.currentFeature = this.newFeature;

        this.showPanelContent();
        this.featureDescriptionPanel.show();
        if(this.isAnimationEnabled())
        {
            this.animation.slideDownPanel();
        }
        else
        {
            this.refreshContentHeight();
        }

        this.fixIESix();
    },

    closePanel: function()
    {
        this.switchLinkStyle(this.currentFeature);
        this.currentFeature = null;
        if(this.isAnimationEnabled())
        {
            this.animation.closePanel();
        }
        else
        {
            this.collapseOpenSubsection();
            this.featureDescriptionPanel.hide();
            this.refreshContentHeight();
        }

       // this.fixIESix();
    },

    // replace current panel content
    updatePanelContent: function()
    {
        this.currentFeature = this.newFeature;

        if(this.isAnimationEnabled())
        {
            this.animation.changeContent();
        }
        else
        {
            this.collapseOpenSubsection();
            this.showPanelContent();
            this.refreshContentHeight();
        }
    },

    // make a link selected/deselected
    switchLinkStyle: function(featureLink)
    {
        if (featureLink)
        {
            featureLink.toggleClass("feature_link_selected");
            featureLink.parent().toggleClass("rio_list_item_selected");
        }
    },

    // scroll to top of rio_list
    scrollUp: function()
    {
        $.scrollTo($(".rio_list_bg"), "slow");
    },

    // get feature name and show it
    showPanelContent: function()
    {
        var anchor = this.currentFeature.attr("href");
        anchor = anchor.substr(1, anchor.length);

        if (this.isShowAllLink())
        {
            this.showSection(anchor);
        }
        else
        {
            this.showSubSection(anchor);
        }
    },

    // show all section with name in "anchor"
    showSection: function(anchor)
    {
        var section = $("a:contains(" + anchor + ")").parent();

        section.children().children().not("a").show();
        section.children().not("a").show();
    },

    // show section header and subsection with name in "anchor"
    showSubSection: function(anchor)
    {
        var subSection = $("a:contains(" + anchor + ")").parent();
        var sectionHeader = subSection.parent().children(":first-child").next();

        sectionHeader.show();
        subSection.children().not("a").show();
        subSection.show();
    },

    // is to show all section?
    isShowAllLink: function()
    {
        var listItem = this.currentFeature.parent();
        return listItem.hasClass("rio_list_item_last");
    },

    // fix IE 8 bug with panel/content height rendering
    refreshContentHeight: function()
    {
        var isIE8 = ( !this.isAnimationEnabled() &&  ( jQuery.browser.version.substring(0, 2) == "8." ) );
        if ( isIE8 )
        {
            var content = $(".content");
            window.setTimeout( function()
            {
                content.hide();
                content.show();
            }, 50 );
        }
    },

    fixIESix: function()
    {
        var isIE6 = ( jQuery.browser.version.substring(0, 2) == "6." );
        if( !isIE6 )
        {
            return;
        }

        var content = $('div.content');
        content.css("margin-top", "-56");
        content.css('margin-bottom', "-56");
    },

    // can browser correct animate a features panel
    isAnimationEnabled: function()
    {
        if($.browser.msie)
        {
            var incompatibleVersions = ["6.", "8.", "7."];
            if( $.inArray(jQuery.browser.version.substring(0, 2), incompatibleVersions) != -1)
            {
                return false;
            }
        }
        return true;
    }
});

$(function(){
    var page = new RioFeatures();
    if ( $.fn.ifixpng )
    {
        $('img[src$=".png"]').ifixpng();
        $('.free_download_button').ifixpng();
    }
});